<template>
  <view class="content">
    <view class="base-info" @click="toUserEdit()">
      <view class="column" style="width: 100%;">
		<view class="" style="display: flex;justify-content: space-between;align-items: center;">
			<view class="" style="display: flex;flex-direction: column;">
				<view class="align-height">
				  <text class="name">张明明18576</text>
				</view>
				<view class="timeToWork"> 高级java开发工程师 </view>
				<view class="timeToWork">
				  <text>
				    <!-- {{ formatAge(resume.timeToWork) }} -->
				    10年经验
				  </text>
				  <text>
				    <!-- {{ formatAge(resume.birthday) }} -->
				    30岁
				  </text>
				  <text>本科</text>
				</view>
			</view>
			<view class="">
				<image class="header" :src="$mConfig.imageUrl + '/image/per1.png'"></image>
			</view>
		</view>
        <view class="timeToWork" style="display: flex;justify-content: space-around;">
          <text>月薪 6-7k </text>
          <text>日薪300/天 </text>
          <text>时薪 23/小时</text>
        </view>
      </view>
     
    </view>
	<view class="work-exp column width-100 white">
	  <view class="space-between-algin">
	    <text class="text-title">求职状态</text>
	  </view>
	  <view class="column work-exp-item">
	    <view class="space-between-algin">
	      <text class="text-sub-title">在职-月内到岗 </text>
	  </view>
	</view>
	</view>
    <view class="skill width-100 padding-height-30 column white">
      <view class="space-between-algin">
        <text class="text-title">个人优势</text>
      </view>
      <text class="item-content ellipsis-twoline margin-height-20">
        阿斯加德浪费瓦克反馈卡饭卡无份额为卡法梅
        卡瓦发么开挖dskaljfkewfjkewak...................
      </text>
    </view>

    <!-- <view class="expect column width-100 padding-height-30 white">
			<view class="space-between-algin">
				<text class="text-title">求职期望</text>
			</view>
			<view class="column margin-top-10">
				<view class="column margin-top-10" v-for="(item, index) in resume.jobExpectList" :key="index" @click="toExpectEdit(item.id)">
					<view class="space-between-algin">
						<text class="text-sub-title">{{ item.postName }}</text>
						<text class="yzb yzb-next"></text>
					</view>
					<text class="text-color">{{ item.expectSalary }} . {{ item.industryName }}</text>
				</view>
			</view>
		</view> -->

    <view class="work-exp column width-100 white">
      <view class="space-between-algin">
        <text class="text-title">工作经历</text>
      </view>
      <view class="column work-exp-item">
        <view class="space-between-algin">
          <text class="text-sub-title">山西弘成云彩科技有限公司 </text>
          <view class="align-height">
            <text style="font-size: 26rpx">2015.04-2017.12</text>
          </view>
        </view>
        <text class="text-color-grey">高级java开发工程师</text>
        <text class="item-content ellipsis-threeline"
          >内容：工作内容是指劳动者具体从事什么种类或
          内容的劳动，是劳动合同确定劳动者应当履行
          动义务的主要内容，包括劳动者从事劳动的工</text
        >
      </view>
    </view>

    <!-- <view class="pro-exp column width-100 padding-height-30 white">
			<view class="space-between-algin">
				<text class="text-title">项目经历</text>
				<text class="yzb yzb-jia1" @click="toProEdit(0)"></text>
			</view>
			<view class="column margin-top-10" v-for="(item, index) in resume.proExpList" :key="index" @click="toProEdit(item.id)">
				<view class="space-between-algin">
					<text class="text-sub-title">{{ item.name }}</text>
					<view class="align-height">
						<text class="text-color-grey">{{ formatDates(item.startDate) }}-{{ formatDates(item.endDate) }}</text>
						<text class="yzb yzb-next"></text>
					</view>
				</view>
				<text class="text-color">{{ item.role }}</text>
				<text class="item-content ellipsis-twoline margin-top-20">内容：{{ item.descr }}</text>
				<text class="item-content ellipsis-twoline margin-top-10" v-if="item.performance">业绩：{{ item.performance }}</text>
			</view>
		</view> -->

    <view class="edu-exp column width-100 padding-height-30 white">
      <view class="space-between-algin">
        <text class="text-title">教育经历</text>
      </view>
      <view
        class="column width-100 work-exp-item"
        v-for="(item, index) in 2"
        :key="index"
        @click="toEduEdit()"
      >
        <view class="space-between-algin">
          <text class="text-sub-title">山东大学</text>
          <view class="align-height">
            <text style="font-size: 26rpx">2007.07-2011.06</text>
          </view>
        </view>
        <text class="text-color-grey" style="padding-bottom: 0">本科 软件工程技术</text>
      </view>
    </view>

    <!-- 	<view class="skill-item2 column width-100 padding-height-30 bottom-line">
			<view class="space-between-algin">
				<text class="text-title">技能标签</text>
				<text class="yzb yzb-jia1" @click="confirmDialog"></text>
			</view>
			<view class="skill-item">
				<view class="center-algin skill-item-item" v-for="(item, index) in skills" :key="index">
					<text class="item text-blue" @click="select(index)">{{ item }}</text>
					<view class="img_delete center-algin" @click="deleteImg(index)"><text class="text-white text-size-base text-color-inverse">X</text></view>
				</view>
			</view>
		</view> -->

    <!-- <view class="edu-exp column width-100 padding-height-30 bottom-line">
			<view class="space-between-algin">
				<text class="text-title">资格证书</text>
				<text class="yzb yzb-jia1" @click="toCertEdit()"></text>
			</view>
			<view class="skill-item2">
				<text>英语六级</text>
				<text>计算机三级</text>
				<text>初级统计师</text>
				<text>一级建造师</text>
				<text>二级建造师</text>
				<text>高级统计师</text>
			</view>
		</view> -->
    <view style="height: 200rpx"></view>
    <view class="btns" v-if="fromType == 1">
      <view class="origin btn">聊一聊</view>
      <view class="blue btn">拨打电话</view>
    </view>
    <view class="btns btns-bom" v-else-if="fromType == 2">
      <view class="blue btn">修改录取时间</view>
      <view class="red btn">拒绝录取</view>
      <view class="blue1 btn">确认录取</view>
    </view>
    <view class="btns" v-else>
      <view class="red btn">拒绝面试</view>
      <view class="blue btn">邀请面试</view>
    </view>
  </view>
</template>

<script>
import mCell from "@/components/m-cell/m-cell.vue";
import { formatDate, calCurrentYear } from "@/common/date";
export default {
  components: {
    mCell,
  },
  data() {
    return {
      skillContent: "",
      statusIndex: 0,
      workStatusArray: [
        "在职-暂不考虑",
        "在职-考虑机会",
        "在职-月内到岗",
        "离职-随时到岗",
      ],
      resume: {},
      workStatus: null,
      skills: [],
      dialogTitle: "添加关键词",
      skillValue: "",

      horizontal: "right",
      vertical: "bottom",
      direction: "vertical",
      pattern: {
        color: "#333",
        backgroundColor: "#fff",
        selectedColor: "#333",
        buttonColor: "#12ae85",
        iconColor: "#fff",
      },
      fromType: 1,
    };
  },
  onShow() {
    this.getResume();
  },
  onLoad(opt) {
    if (opt.type) {
      this.fromType = opt.type;
    }
  },
  methods: {
    trigger(e) {
      console.log(e);
      this.contents[e.index].active = !e.item.active;
      if (e.index == 0) {
        this.$mRouter.push({
          route: this.$mRoutesConfig.resumePreview,
          query: {
            id: this.resume.id,
          },
        });
      } else if (e.index == 1) {
        this.exportWord();
      }
    },

    async exportWord() {
      uni.showModal({
        title: "提示",
        content: "确定要导出模板简历吗？",
        success: (res) => {
          if (res.confirm) {
            this.doExport();
          }
        },
      });
    },

    async doExport() {
      uni.showLoading();
      let url = await this.$apis.exportResumeWord({ id: this.resume.id });
      uni.hideLoading();
      if (url) {
        this.$mRouter.push({
          route: this.$mRoutesConfig.resumeFile,
          query: {
            url: url,
          },
        });
      }
    },

    fabClick() {
      // uni.showToast({
      // 	title: '点击了悬浮按钮',
      // 	icon: 'none'
      // });
    },
    formatDates(time) {
      if (time == null || time === "") {
        return "N/A";
      }
      let str = time.replace(/-/g, "/");
      let date = new Date(str);
      // return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
      return formatDate(date, "yyyy.MM");
    },

    formatAge(birthday) {
      return calCurrentYear(birthday);
    },

    async getResume() {
      this.resume = await this.$apis.getResume();
      this.workStatus = this.resume.jobStatus;
      if (this.resume.skills) {
        this.skills = this.resume.skills.split(",");
      }
    },

    async bindPickerChange(e) {
      console.log("picker发送选择改变，携带值为", e.target.value);
      this.workStatus = this.workStatusArray[e.target.value];
      let param = {
        id: this.resume.id,
        jobStatus: this.workStatus,
      };
      let res = await this.$apis.updateResumeBasic(param);
    },
    toUserEdit() {
      this.toEdit(this.$mRoutesConfig.userInfo);
    },
    toSkillEdit() {
      // this.toEdit(this.$mRoutesConfig.editSkill)
      this.$mRouter.push({
        route: this.$mRoutesConfig.editSkill,
        query: {
          id: this.resume.id,
          content: this.resume.personalSkill,
        },
      });
    },
    toExpectEdit(id) {
      this.toEdit(this.$mRoutesConfig.editExpect, id);
    },
    toProEdit(id) {
      this.toEdit(this.$mRoutesConfig.editPro, id);
    },
    toEduEdit(id) {
      this.toEdit(this.$mRoutesConfig.editEdu, id);
    },

    toEdit(url, id) {
      this.$mRouter.push({
        route: url,
        query: {
          id: id,
        },
      });
    },

    /**
     * 打开提交信息
     */
    confirmDialog() {
      if (this.skills.length == 8) {
        uni.showToast({
          icon: "none",
          title: "最多添加8个技能标签",
        });
        return;
      }
      this.dialogTitle = "添加技能标签";
      this.$refs.dialogInput2.init();
      this.$refs.dialogInput.open();
    },

    /**
     * 输入对话框的确定事件
     */
    dialogInputConfirm(val) {
      console.log(val);
      if (!val) {
        uni.showToast({
          icon: "none",
          title: "请输入内容",
        });
        return;
      }
      if (val.length < 2 || val.length > 8) {
        uni.showToast({
          icon: "none",
          title: "请输入2-8个字",
        });
        return;
      }
      this.skills.push(val);
      this.$refs.dialogInput.close();
      this.updateSkills();
    },

    select(index) {
      this.dialogTitle = "修改技能标签";
      this.skillValue = this.skills[index];
      this.$refs.dialogInput.open();
    },

    deleteImg(index) {
      this.skills.splice(index, 1);
      this.updateSkills();
    },

    async updateSkills() {
      let skill = "";
      for (let i in this.skills) {
        skill = skill + "," + this.skills[i];
      }
      skill = skill.substr(1, skill.length);
      let param = {
        id: this.resume.id,
        skills: skill,
      };
      let res = await this.$apis.updateResumeBasic(param);
      if (res) {
        uni.showToast({
          icon: "none",
          title: "添加成功",
        });
      }
    },

    hidePhone(phone) {
      return this.$mUtils.phoneHiden(phone);
    },
  },
};
</script>
<style>
page {
  background: #f5f5fc;
}
</style>
<style lang="scss" scoped>
view {
  display: flex;
}

.text-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #292f44;
}

.text-sub-title {
  font-weight: bold;
}

.item-content {
  color: $uni-text-color;
}

.content {
  padding: 0 30upx;
  box-sizing: border-box;
  background: #f5f5fc;
  color: #3b4552;
  font-size: 30rpx;
  line-height: 45rpx;
  .white {
    background: #fff;
    border-radius: 10rpx;
    padding: 36rpx 32rpx;
    box-sizing: border-box;
    margin-bottom: 20rpx;
    .work-exp-item {
      border-bottom: 1px solid #e5e5e5;
      padding: 36rpx 0;
      &:last-child {
        border: 0;
        padding-bottom: 8rpx;
      }
    }
  }
  .text-color-grey {
    color: #999999;
    font-size: 24rpx;
    padding: 22rpx 0;
  }
}

.base-info {
  padding: 0 28rpx;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  .name {
    font-size: 36rpx;
    font-weight: bold;
    color: #222;
    margin-bottom: 24rpx;
  }
  .timeToWork {
    font-size: 30rpx;
    margin-bottom: 24rpx;
    text {
      margin-right: 30rpx;
    }
  }

  .yzb-bianji2 {
    color: #cccccc !important;
  }

  .header {
    width: 122rpx;
    height: 122rpx;
    // border-radius: 50%;
  }
  .phone {
    font-size: 28rpx;
    align-items: center;
    image {
      width: 30rpx;
      height: 30rpx;
      margin-right: 10rpx;
    }
  }
}

.edu-exp {
  margin-bottom: 100upx;
}
.btns {
  position: fixed;
  background: #fff;
  display: flex;
  padding: 30rpx 40rpx;
  bottom: 0;
  justify-content: space-between;
  width: calc(100% - 80rpx);
  .btn {
    color: #fff;
    font-size: 30rpx;
    font-weight: bold;
    background: #f8a900;
    width: 314rpx;
    line-height: 84rpx;
    border-radius: 12rpx;
    text-align: center;
    justify-content: center;
  }
  .red {
    background: #fb7979;
  }
  .blue {
    background: #3a92ff;
  }
  .blue1 {
    background: #24c9ff;
  }
}
.btns-bom {
  .btn {
    width: 212rpx;
  }
}
</style>
